<template>
  <view>
    <!-- 搜索时间 -->
    <view class="searchtime">
      <uni-datetime-picker
        class="item"
        style=""
        placeholder="开始日期"
        type="date"
        :value="starttime"
        @change="changeStartTime"
      />
      <uni-datetime-picker
        class="item"
        placeholder="结束日期"
        type="date"
        :value="endtime"
        @change="changeEndTime"
      />
      <view style="margin-left: 20rpx">
        <van-button @click="handleSearch" type="info">搜索</van-button></view
      >
    </view>

    <view>
      <!-- 空 -->
      <view class="" v-if="tobeclean.length === 0">
        <u-empty></u-empty>
      </view>

      <!-- 会员卡列表 -->
      <view v-else class="cardlist">
        <view class="card-item" v-for="(item, index) in moneylist" :key="index">
          <view class="subitem">
            <view>销售单量:</view>
            <view>{{ item.sale_num }}</view>
          </view>
          <view class="subitem"
            ><view>销售金额:</view> <view>{{ item.sale_money }}</view></view
          >
          <view class="subitem"
            ><view>销售商品数:</view>
            <view>{{ item.sale_good_num }}</view></view
          >
          <view class="subitem"
            ><view>租赁单数:</view> <view>{{ item.lease_num }}</view></view
          >
          <view class="subitem"
            ><view>租赁商品数:</view>
            <view>{{ item.lease_good_num }}</view>
          </view>

          <view class="subitem"
            ><view>特价销售单量:</view>
            <view>{{ item.tejia_num }}</view>
          </view>

          <view class="subitem"
            ><view>特价销售商品数:</view>
            <view>{{ item.tejia_good_num }}</view></view
          >
          <view class="subitem"
            ><view>总销售额:</view>
            <view>{{ item.total_money }}</view>
          </view>
          <view class="subitem"
            ><view>总利润:</view>
            <view>{{ item.total_profit }}</view>
          </view>
          <view class="subitem"
            ><view>折扣卡数量:</view>
            <view>{{ item.sale_card_num }}</view>
          </view>
          <view class="subitem"
            ><view>折扣卡销售额:</view>
            <view>{{ item.sale_card_money }}</view>
          </view>
          <view class="subitem"
            ><view>租赁卡数量:</view>
            <view>{{ item.lease_card_num }}</view>
          </view>
          <view class="subitem"
            ><view>租赁卡销售额:</view>
            <view>{{ item.lease_card_money }}</view>
          </view>
          <view class="subitem"
            ><view>售卡押金:</view>
            <view>{{ item.card_deposit }}</view>
          </view>
          <view class="subitem"
            ><view>时间:</view>
            <view>{{ item.time }}</view>
          </view>
        </view>
      </view>
      <!-- 加载中 -->
      <text class="loading-text">
        {{
          loadingType === 0
            ? contentText.contentdown
            : loadingType === 1
            ? contentText.contentrefresh
            : contentText.contentnomore
        }}
      </text>
    </view>
  </view>
</template>

<script>
// 点击根据索引传不同的状态
var pageIndex = 1;

export default {
  data() {
    return {
      starttime: "",
      endtime: "",

      moneylist: [],

      loadingType: 0,
      contentText: {
        contentdown: "上拉显示更多",
        contentrefresh: "正在加载...",
        contentnomore: "没有更多数据了",
      },
    };
  },
  watch: {
    datetimesingle(newval) {
      console.log("单选:", this.datetimesingle);
    },
  },
  methods: {
    changeStartTime(e) {
      console.log("-change事件:", e);
      this.starttime = e;
      //   开始时间
    },
    changeEndTime(e) {
      console.log("-change事件:", e);

      // 结束时间
      this.endtime = e;
    },
    // 根据时间搜索列表
    handleSearch() {
      console.log("搜素");
      this.getInitializeList();
    },
    // 查看财务列表(原有)
    getInitializeList() {
      const that = this;
      pageIndex = 1;
      uni.request({
        url: "http://gxyckf.1qit.com/api/admin.statistics/list", //仅为示例，并非真实接口地址。
        data: {
          page: pageIndex,
          //   开始和结束时间
          starttime: that.starttime,
          endtime: that.endtime,
        },
        method: "POST",
        header: {
          token: uni.getStorageSync("token"),
        },
        success: (res) => {
          console.log(res.data.data);

          that.moneylist = res.data.data.data;

          uni.hideNavigationBarLoading();
          uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
        },
      });
    },
    // 查看待清洗列表(加载更多)
    getMoreInitializeList() {
      // 加载更多列表
      const that = this;
      pageIndex++;
      if (that.loadingType != 0) {
        return false; //loadingType!=0;直接返回
      }
      that.loadingType = 1;
      uni.showNavigationBarLoading();
      uni.request({
        url: "http://gxyckf.1qit.com/api/admin.statistics/list",
        method: "POST",
        data: {
          page: pageIndex,
          //   开始和结束时间
          starttime: that.starttime,
          endtime: that.endtime,
        },
        header: {
          token: uni.getStorageSync("token"),
        },
        success(res) {
          if (that.moneylist.length == res.data.data.total) {
            that.loadingType = 2;
            uni.hideNavigationBarLoading(); //关闭加载动画
            return false;
          }
          that.moneylist = that.moneylist.concat(res.data.data.data);
          that.loadingType = 0; //将loadingType归0重置
          uni.hideNavigationBarLoading(); //关闭加载动画
        },
      });
    },
  },
  mounted() {},
  onLoad() {
    // 原有列表
    this.getInitializeList();
  },
  /*下拉刷新*/
  onPullDownRefresh() {
    this.getInitializeList();
  },
  onReachBottom() {
    this.getMoreInitializeList();
    console.log("滚到到底部了");
  },
};
</script>

<style scoped>
.searchtime {
  display: flex;
  align-items: center;
  padding: 0 40rpx;
}
.subitem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 0;
}
.cardlist {
  background: #fff;
  padding: 40rpx;

  /* overflow-y: auto; */
  /* height: 260rpx; */
}
.card-item {
  color: #000;
  font-size: 30rpx;
  font-weight: 600;
  /* background: #2979ff; */
  padding: 10rpx;
  box-shadow: 0 0 30rpx #ddd;

  border-radius: 20rpx;
  margin-bottom: 20rpx;
}

.loading-text {
  height: 80upx;
  line-height: 80upx;
  font-size: 25upx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.item {
  width: 40%;
}
</style>
